<template>
	<div class="login dflex_c dflex_d_c">
		<el-image style="width:50px;height:50px;border-radius:8px;margin-bottom:5px;" src="/static/img/login_log.webp"
			fit="contain"></el-image>
			<div class="title">{{ $api.config().name }}</div>
			<el-form :disabled="loginLoading" :model="form" :rules="rules" ref="ruleForm" class="login_form">
				<el-form-item prop="username" ref="username">
					<el-input v-model="form.username" placeholder="账号" @keyup.enter="enter"></el-input>
				</el-form-item>
				<el-form-item prop="password" ref="password">
					<el-input v-model="form.password" placeholder="密码" show-password
						@keyup.enter="submitForm('ruleForm')"></el-input>
				</el-form-item>
				<el-button :loading="loginLoading" class="login_btn dflex_c margin_t_50 crpr"
						@click="submitForm('ruleForm')">登 录</el-button>
			</el-form>
	</div>
</template>

<script setup>
	import { ref, onMounted, reactive, getCurrentInstance } from 'vue'
	import { useStore } from 'vuex'
	const store = useStore()
	const { proxy } = getCurrentInstance()
	const loginLoading = ref(false)
	const form = reactive({
		username: '',
		password: ''
	})
	const rules = reactive({
		username: [{
			required: true,
			message: '账号不可以为空',
			trigger: ['blur', 'keyup']
		}],
		password: [{
			required: true,
			message: '密码不可以为空',
			trigger: 'change'
		}]
	})
	const business_data = reactive({})
	
	// methods: {
	// 	...mapMutations(['login']),
	
	const enter = () => {
		if (form.username) {
			proxy.$refs.password.$el.querySelector('input').focus()
		}
	}
	
	const getFirstMenu = (menus) => {
		for (let i = 0; i < menus.length; i++) {
			if (menus[i].url) {
				menus[i].path = menus[i].url
				menus[i].fullPath = menus[i].url
				return menus[i]
			}
		}
		return {}
	}
	
	const submitForm = (formName) => {
		proxy.$refs[formName].validate(async (valid) => {
			proxy.$api.set_unvalidated_form_focus(proxy, form)
			if (valid) {
				loginLoading.value = true
				
				let tabCurUrl = ''
				
				// 获取 unipush cid
				form.cid = await getPushCid()
				
				proxy.$func.useadmin
					.call('user/loginV2', form, false)
					.then(res => {
						if (res.code == 200) {
							uni.setStorage({
								key: 'useadmin_last_username',
								data: form.username
							})
							
							store.commit('login', {
								token: res.datas.token,
								tokenExpired: res.datas.tokenExpired,
								userInfo: res.datas.userInfo
							})
							
							uni.setStorage({
								key: 'version',
								data: proxy.$api.config().versionName
							})
							
							if (res.datas.historyStorageRes.data.length > 0) {
								tabCurUrl = res.datas.historyStorageRes.data[0].tab_cur_url
								res.datas.historyStorageRes.data[0].storage_datas.forEach(x => {
									uni.setStorage({
										key: x.key,
										data: x.value
									})
								})
							}
							
							uni.setStorage({
								key: '__menu',
								data: res.datas.menuRes.data
							})
							
							const home = getFirstMenu(res.datas.menuRes.data)
							
							uni.setStorage({
								key: '__menu_first',
								data: home
							})
							
							uni.redirectTo({
								url: tabCurUrl || home.url
							})
							
							proxy.$message.success('登录成功!')
							
							loginLoading.value = false
						}
					})
					.catch(() => {
						console.log('请求错误')
						loginLoading.value = false
					})
			}
		})
	}
	
	const getPushCid = () => {
		return new Promise((resolve, reject) => {
			// uni-app客户端获取push客户端标记
			uni.getPushClientId({
				success: (res) => {
					let push_clientid = res.cid
					resolve(push_clientid);
				},
				fail: (err) => {
					proxy.$message.error('请按步骤开启 unipush2.0，或注释掉 [ login.vue 第74行代码 ] 后重新登录')
			
					loginLoading.value = false
				}
			})
		})
	}
	
	onMounted(() => {
	  proxy.$refs.username.$el.querySelector('input').focus()
		uni.getStorage({
			key: 'useadmin_last_username',
			success: res => {
				form.username = res.data;
				proxy.$refs.password.$el.querySelector('input').focus();
			}
		})
	})
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: url('@/static/img/login_bg.png');
		background-size: cover;
		padding: 0;
		margin-top: 0;
	}

	.login {
		width: 880px;
		height: 560px;
		background: #fff;
		box-shadow: 0 0 30px rgba(0, 0, 0, 0.16);
		border-radius: 20px;
	}

	.login>>>.el-form-item.is-error .el-input__inner,
	.login>>>.el-form-item.is-error .el-input__inner:focus {
		border: none;
		border-bottom: 1px solid #d9d9d9;
	}

	.title {
		font-size: 22px;
		font-weight: 800;
		margin-bottom: 100px;
	}

	.login_form .el-input__inner {
		border: none;
		/* border-bottom: 1px solid #d9d9d9; */
		border-radius: 0;
		padding-left: 6px;
		font-size: 14px;
		/* width: 260px; */
		height: 40px;
		color: #ff6a6c;
		background: #fff;
	}
	
	.login_form .el-input{
		width: 260px;
	}
	
	.login_form .login_btn {
		color: #fff;
		width: 260px;
		height: 40px;
		border: none;
		font-size: 18px;
		font-weight: 800;
		border-radius: 4px;
		background-color: #ff6a6c;
	}

	.login_btn:hover {
		background-color: rgba(255, 106, 108, 0.8);
	}
</style>